<template>
	<PageContainer>
		<template #header>
			<u-search v-model="queryParams.title" shape="square" placeholder="请输入关键词" :show-action="true"
				actionText="搜索" :animation="true" @custom="toSearch" @search="toSearch" @clear="toClear" />
		</template>
		<view class="found-container">
			<ScrollList :list="dataList" :total="total" :queryParams="queryParams" :is-loading="isLoading">
				<view class="found-item" v-for="item in dataList" @click="toDetail(item)" :key="item.id">
					<view class="user-info flex-row">
						<Avatar :user="item.profileVo" class="avatar" size="88rpx" />
						<text>{{item.author}}</text>
					</view>
					<view class="article-title line-clamp2">
						{{item.title}}
					</view>
					<view class="cover-images">
						<uni-grid :column="2" :showBorder="false">
							<uni-grid-item v-for="img in item.covers" :key="img">
								<image :src="img" mode="aspectFill"></image>
							</uni-grid-item>
						</uni-grid>
					</view>
				</view>
			</ScrollList>
		</view>
	</PageContainer>
</template>

<script>
	import {
		formartImageUrl
	} from '@/utils/common.js'
	import {
		articleList
	} from '@/api/cms/article.js';
	import Avatar from '@/components/Avatar/Avatar.vue';
	import ScrollList from '@/components/ScrollList/index.vue';
	import PageContainer from '@/components/PageContainer/PageContainer.vue';
	export default {
		components: {
			PageContainer,
			ScrollList,
			Avatar,
		},
		data() {
			return {
				queryParams: {
					current: 1,
					size: 10,
					type: '1',
					title: '',
				},
				total: 0,
				isLoading: false,
				dataList: [],
			}
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/tabBar/found/detail?id=${item.id}`,
				})
			},
			async getArticleList() {
				this.isLoading = true;
				const result = await articleList(this.queryParams);
				result.data.forEach(item => {
					if (item.cover) {
						const covers = item.cover.split(',');
						item.covers = covers.map(img => formartImageUrl(img));
					}
				})
				if (this.queryParams.current == 1) {
					this.dataList = result.data;
				} else {
					this.dataList = this.dataList.concat(result.data);
				}
				this.total = result.total || 0;
				this.isLoading = false;
				uni.stopPullDownRefresh();
			},
			toSearch(value) {
				this.queryParams.current = 1;
				this.queryParams.title = value;
				this.getArticleList();
			},
			toClear() {
				this.queryParams.title = '';
				this.getArticleList();
			}
		},
		onReachBottom() {
			if (this.isLoading) {
				return;
			}
			if (this.queryParams.current * this.queryParams.size < this.total) {
				this.queryParams.current++;
				this.getArticleList();
			}
		},
		onPullDownRefresh() {
			this.queryParams.current = 1;
			this.getArticleList();
		},
		onLoad() {
			this.getArticleList();
		}
	}
</script>

<style scoped lang="scss">
	.found-container {
		padding-bottom: 20rpx;
	}

	.found-item {
		margin-bottom: 20rpx;
		padding: 28rpx 0;
		border-radius: 2px;
		border-bottom: 1px solid #fafafa;

		&:last-child {
			border-bottom: none;
		}
	}

	.user-info {
		font-size: 37rpx;

		.avatar {
			width: 88rpx;
			height: 88rpx;
			border-radius: 88rpx;
			margin-right: 20rpx;
		}
	}

	.article-title {
		padding: 25rpx 0;
		font-size: 32rpx;
		color: #333;
	}

	.cover-images {
		image {
			width: 100%;
			height: 100%;
			border: 1px solid #fff;
			/* 处理图片上下边框为两像素的问题 */
			border-bottom: 0;
		}
	}
</style>